<template>
      <div class="bgWork" v-show='createWork'>
          <div class="mainCreateWork">
              <p>
                 <span class='close' @click='close'></span>
              </p>
                
                <h3>创建工单</h3>
                
                <div class='zc-ws-add-outer-content'>
                        <div class="content111">
                                 <h4>工单内容</h4>
                                   
                                <el-form ref="form" label-width="100px">
                                    <el-form-item label="标题">
                                        <el-input v-model="title"></el-input>
                                    </el-form-item>
                                     <el-form-item label="问题描述">
                                        <el-input type="textarea" v-model="desc"></el-input>
                                    </el-form-item>
                                      <el-form-item label="附件">
                                       <el-upload
                                            class="upload-demo"
                                            :action="actionUrl+'/home/upload/add'"
                                            :on-change="handleChange"
                                            :file-list="fileList3">
                                            <el-button size="small" type="primary">点击上传</el-button>
                                        </el-upload>
                                    </el-form-item>

                                      <el-form-item label="优先级">
                                        <el-select v-model="region" placeholder="请选择">
                                             <el-option
                                                v-for="item in priorityList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                             </el-option>
                                        </el-select>
                                    </el-form-item> 
                                     <el-form-item label="状态">
                                        <el-select v-model="currentStatus" placeholder="请选择">
                                            <el-option
                                                v-for="item in statusList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                             </el-option>
                                        </el-select>
                                    </el-form-item> 
                                    <el-form-item label="分类">
                                       <el-cascader
                                          v-model="selectedOptions"
                                          :options="optionsWithDisabled"
                                          @change="handleChange2"
                                        ></el-cascader>
                                       
                                    </el-form-item>

                                     <el-form-item label="创建客服">
                                        <el-input v-model="service" readonly="readonly"></el-input>
                                    </el-form-item>
                                    <el-form-item label="客户">
                                        <el-input v-model="Customer" readonly="readonly"></el-input>
                                    </el-form-item>
                                    <el-form-item label="抄送工单客服">
                                        <el-select 
                                        v-model="value8" 
                                        filterable remote 
                                        :remote-method="remoteMethod"
                                         placeholder="请选择">
                                            <el-option
                                            v-for="item in optionsItemBOX"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="受理客服">
                                        <el-select 
                                        v-model="AcceptValue" 
                                        filterable remote 
                                        :remote-method="remoteMethod"
                                         placeholder="请选择">
                                            <el-option
                                            v-for="item in optionsItemBOX"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                </el-form>
                        </div>
                </div> 


                
          </div>


             <p class='btnGroup'>
                       <el-button type="primary" @click='createWorkList' round>保存</el-button>
                       <el-button round @click='close'>取消</el-button>
             </p>
          
      </div>  
</template>


<script>
import chat from "../../libs/chat";
import createdWork from "../../libs/createWork";
export default {
  name: "createWork",
  data() {
    return {
      actionUrl: "",
      serviceId: "", //客服id
      CustomerId: "", //客户id
      Customer: "", //客户
      title: "", //标题
      service: "", //创建客服
      region: [], //优先级
      currentStatus: [], //状态
      desc: "", //问题描述
      selectedOptions: [], //分类
      currentSelect: "", //当前分类
      createWork: false,
      value8: "",  //抄送客服
      AcceptValue:'', //受理客服
      optionsItemBOX: [],
      priorityList: [
        {
          value: 1,
          label: "低"
        },
        {
          value: 2,
          label: "中"
        },
        {
          value: 3,
          label: "高"
        },
        {
          value: 4,
          label: "紧急"
        }
      ],

      statusList: [
        {
          value: 1,
          label: "未受理"
        },
        {
          value: 2,
          label: "受理中"
        },
        {
          value: 3,
          label: "等待回复"
        },
        {
          value: 4,
          label: "已解决"
        },
        {
          value: 5,
          label: "已关闭"
        }
      ],
      enclosure:'',
      optionsWithDisabled: [],
      fileList3: [],
    };
  },

  methods: {
    //获取用户列表
    getuserList() {
      let page = 1,
        _self = this;
      let limit = 10;
      let username = "",
        customer_sn = "",
        nickname = "",
        realname = "",
        status = "",
        type = "",
        phone = "",
        qq = "";
      createdWork.getAdminUser(
        page,
        limit,
        username,
        customer_sn,
        nickname,
        realname,
        status,
        type,
        phone,
        qq,
        function(res) {
          let data = res.data.data;
          if (_self.optionsItemBOX.length === 0) {
            for (let i = 0; i < data.length; i++) {
              _self.optionsItemBOX.push({
                label: data[i].nickname,
                value: data[i].id
              });
            }
          }
          console.log(res.data.data);
        }
      );
    },

    //搜索用户列表
    remoteMethod(value) {
      if (value !== "") {
        setTimeout(() => {
          let page = 1,
            _self = this;
          let limit = 1500;
          let customer_sn = "",
            nickname = "",
            realname = "",
            status = "",
            type = "",
            phone = "",
            qq = "";
          createdWork.getAdminUser(
            page,
            limit,
            value,
            customer_sn,
            nickname,
            realname,
            status,
            type,
            phone,
            qq,
            function(res) {
              let data = res.data.data;
              for (let i = 0; i < data.length; i++) {
                _self.optionsItemBOX.push({
                  label: data[i].nickname,
                  value: data[i].id
                });
              }
              console.log(res.data.data);
            }
          );
        }, 200);
      } else {
        _self.optionsItemBOX = [];
      }
    },

    //创建工单
    createWorkList: function() {
      let _self = this;
      createdWork.getAddWorkText(
        _self.title,
        _self.selectedOptions[_self.selectedOptions.length-1],
        _self.desc,
        _self.CustomerId,
        _self.region,
        _self.currentStatus,
        23,     //创建渠道    在线工作台（PC客服提交
        _self.AcceptValue,
        _self.value8,
        _self.enclosure,
        function(res) {
          console.log(res);
          if (res.code === 200) {
            _self.$notify({
              title: "工单",
              message: res.data,
              type: "success"
            });
            _self.title = "";
            _self.desc = "";
            _self.region = "";
            _self.fileList3 = [];
            _self.currentStatus = "";
            _self.value8 = "";
            _self.AcceptValue = "";
            _self.currentSelect = "";
            _self.selectedOptions = [];

            _self.createWork = false;
          } else {
            _self.$notify({
              title: "工单",
              message: res.error,
              type: "error"
            });
            _self.createWork = true;
          }
        }
      );
    },

    //获取分类
    hasCreatedWork: function() {
      let _self = this;
      createdWork.getcreatedWorkText(function(res) {
       let str = JSON.stringify(res.data)
              .replace(new RegExp("id", "g"), "value")
              .replace(new RegExp("title", "g"), "label")
              .replace(new RegExp(',"children":\\[\\]', "g"), "");

        _self.optionsWithDisabled = JSON.parse(str);
        console.log(_self.optionsWithDisabled);
      });
    },
    handleChange(file, fileList) {
      if(file.response !== undefined){
        this.enclosure = file.response.data;
      }
    },

    openCreate(toUser) {
      console.log(toUser);
      this.Customer = toUser.userName;
      this.CustomerId = toUser.userId;
      this.service = chat.my().userName;
      this.serviceId = chat.my().userId;
      this.createWork = true;
      this.getuserList();
      this.hasCreatedWork();

    },

    close() {
      this.createWork = false;
      this.title = "";
      this.desc = "";
      this.region = "";
      this.fileList3 = [];
      this.currentStatus = "";
      this.value8 = "";
      this.currentSelect = "";
      this.selectedOptions = [];
    },

    //分类
    handleChange2(value) {
      this.selectedOptions = value;
      this.currentSelect = value.toString();
    }
  },
  mounted() {
    this.actionUrl = process.env.API_URL;
  }
};
</script>


<style>
.el-select,
.el-cascader {
  width: 100%;
}
.bgWork {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.3);
}

.zc-ws-add-outer-content {
  overflow-y: auto;
  padding-bottom: 6rem;
}

.mainCreateWork {
  width: 53.5%;
  height: 100%;
  overflow-y: auto;
  background: #fff;
  padding: 1rem 2rem;
  position: absolute;
  right: 0;
  box-sizing: border-box;
}
.mainCreateWork::-webkit-scrollbar {
  width: 2px;
  display: none;
}

.mainCreateWork::-webkit-scrollbar-track-piece {
  background-color: #fff;
} /* 滚动条的内层滑轨背景颜色 */

.mainCreateWork::-webkit-scrollbar-track {
  background-color: #fff;
} /* 滚动条的外层滑轨背景颜色 */

.mainCreateWork::-webkit-scrollbar-thumb {
  background-color: #d4d8e2;
} /* 滚动条的内层滑块颜色 */

.mainCreateWork::-webkit-scrollbar-button {
  background-color: #fff;
  display: none;
} /* 滑轨两头的监听按钮颜色 */

.mainCreateWork > p {
  text-align: right;
}

.close {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url("../../assets/icon/close.png") center center no-repeat;
  background-size: 1rem;
}

.mainCreateWork h3 {
  margin: 1rem 0;
}

.mainCreateWork h4 {
  font-size: 1rem;
  font-weight: 400;
  margin: 1rem 0;
}

body .el-textarea__inner {
  border: 1px solid #dddfe7;
}

.content111,
.couronet {
  padding: 0.5rem;
}

.couronet {
  margin-bottom: 8.5rem;
}

.btnGroup {
  position: absolute;
  width: 53.5%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 999;
  min-height: 2px;
  box-sizing: border-box;
  padding: 1rem 2rem;
  box-shadow: 0 0 8px 0 rgba(61, 73, 102, 0.15);
}
</style>
